@import '../../mixins'

.MenuEditor
  box(relative)
  size(100%, 100%)
  overflow-y: auto
  background-color: var(--bg)
  background-attachment: local
  background-image: var(--bg-img)
  background-size: var(--bg-size)

.MenuEditor section
  box(relative, grid)
  size(100%, max-w: 400px)
  padding: 2px 0 32px
  margin: 0 auto

.MenuEditor section > h2
  box(relative)
  size(100%)
  text(s: rem(28), w: 400)
  color: var(--title-fg)
  text-align: center
  margin: 28px 0 24px

.MenuEditor .menu-group
  box(relative)
  size(100%)
  overflow: hidden
  padding: 0
  &.-dis
    padding: 12px 0 0
  
.MenuEditor .group-title
  box(relative)
  text(s: rem(16))
  color: var(--label-fg)
  padding: 0
  margin: 2px 0 2px 22px

.MenuEditor .opt
  box(relative, flex)
  align-items: center
  padding: 0
  border-radius: 2px
  &:hover
    background-color: #00000008
    .opt-title
      opacity: 1
    .opt-btn
      opacity: .8

  &[data-separator]:before
    content: ''
    box(relative)
    pos(l: 1px)
    size(100%, 1px)
    background-color: var(--border-fg)
    box-shadow: 0 1px 0 0 var(--border-flare-fg)

  &[data-selected]
    box-shadow: inset 0 0 0 1px var(--label-fg)
    background-color: #00000016

  .opt-title
    box(relative)
    text(s: rem(16))
    color: var(--label-fg)
    white-space: nowrap
    overflow: hidden
    text-overflow: ellipsis
    padding: 2px 5px 2px 0
    margin: 0 auto 0 0
    opacity: .7
    cursor: default

  .opt-btn
    box(relative)
    size(22px, same)
    fill: var(--title-fg)
    flex-shrink: 0
    flex-grow: 0
    cursor: pointer
    opacity: .2
    &.-up svg
      transform: rotateZ(180deg)
    &.-in svg
      transform: rotateZ(-90deg)
    &.-rm
      fill: var(--false-fg)
    &.-rm svg
      size(18px, same)
      pos(calc(50% - 9px), same)
    &:hover
      opacity: 1
    &:active
      opacity: .7
    svg
      box(absolute)
      size(16px, same)
      pos(calc(50% - 8px), same)
.MenuEditor .menu-group[data-type="sub"] .opt
  padding: 0 0 0 42px
.MenuEditor .menu-group.-dis .opt
  padding: 0 0 0 22px
  opacity: .32
  cursor: pointer
.MenuEditor .menu-group.-dis .opt .opt-title
  cursor: pointer
.MenuEditor .opt[data-separator] .opt-btn.-in
  opacity: 0

.MenuEditor .ctrls
  box(relative, flex)
  grid-gap: 8px 8px
  justify-content: center
  flex-wrap: wrap
  margin: 16px 16px 0

.MenuEditor .btn
  size(auto)
  padding: 5px 16px
